<template>
    <div @click.stop v-show="props.isShow" class="user-info absolute cursor-default">
        <div class="top flex items-center">
            <el-image 
            class="rounded-full user-img mr-4" 
            :src="userStore.user.userImage"
            >
                <template #error>
                    <img :src="defaultUserImg">
                </template>
            </el-image>
            <div class="user-info-text">
                <div class="user-name">{{ userStore.user.realName }}</div>
                <div class="user-position">{{ personalSetting.roleNames }}</div>
            </div>
        </div>
        <div class="line"></div>
        <div @click="onClickAccount" class="button-item flex items-center cursor-pointer mt-4">
            <svg class="iconpark-icon mr-2"><use href="#people"></use></svg>
            <span>个人中心</span>
        </div>
        <div @click="onClickQuit" class="button-item flex items-center cursor-pointer">
            <svg class="iconpark-icon mr-2"><use href="#logout"></use></svg>
            <span>安全退出</span>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import defaultUserImg from '@/Assets/Images/defaultUserImg.svg';
import { useUserStore } from '@/Stores/user';
import request from '@/Utils/request';
import type { PersonalSettingType } from '@/Utils/type';
import { onMounted, reactive } from 'vue';
import { enterUserAccount, quit } from '@/Utils/enter';

// 传参
const props = defineProps({
    isShow: {
        type: Boolean,
        value: false
    }
});

const emit = defineEmits(['close']);

// 用户信息
const userStore = useUserStore();

// 平台数据
const personalSetting: PersonalSettingType = reactive({
    id: 0,
    realName: '',
    roleNames: '',
    mobile: '',
    userImage: ''
});

// 获取平台数据
const getPersonalSetting = async (count = 1) => {
    if (userStore.user.id) {
        const data: PersonalSettingType = await request({
            url: '/user/bloc-user-info/adminPersonalSetting',
            query: {
                userId: userStore.user.id
            },
            method: 'get'
        });
        personalSetting.id = data.id;
        personalSetting.realName = data.realName;
        personalSetting.roleNames = data.roleNames;
        personalSetting.mobile = data.mobile;
        personalSetting.userImage = data.userImage;
    } else if (count < 10) {
        await new Promise(resolve => setTimeout(resolve, 10));
        getPersonalSetting(count + 1);
    }
};

// 点击和人中心
const onClickAccount = () => {
    enterUserAccount();
    emit('close');
};

// 点击退出
const onClickQuit = () => {
    quit();
    emit('close');
};

onMounted(() => {
    getPersonalSetting();
});
</script>
    
<style lang="scss" scoped>
.user-info {
    width: 200px;
    height: 191px;
    // box-shadow: 0px 6px 6px 0px rgba(102,163,255,0.1);
    box-shadow: 0px 8px 10px -5px rgba(0,0,0,0.08), 0px 16px 24px 2px rgba(0,0,0,0.04), 0px 6px 30px 5px rgba(0,0,0,0.05);
    right: 0;
    top: 50px;
    background: #ffffff;
    z-index: 11;
    color: #47453D;
    border-radius: 4px;
    .top {
        padding: 0 24px;
        height: 75px;

        .user-img {
            width: 30px;
            height: 30px;
        }

        .user-name {
            color: #47453D;
        }

        .user-position {
            color: #999999;
        }
    }
    .line {
        background: #F0F0F0;
        height: 1px;
        margin-left: 24px;
        margin-right: 24px;
    }
    .button-item {
        padding: 0 24px;
        height: 50px;
        &:hover {
            background: $default-color;
            color: #ffffff;
            .iconpark-icon {
                color: #ffffff;
            }
        }
        .iconpark-icon {
            color: #8B8B8B;
            width: 18px;
            height: 18px;
        }
    }
}
</style>